<template>
  <header class="youth-volunteer-header">
    <div class="header-container">
      <div class="logo-area">
        <img 
          src="@/assets/logo.png" 
          alt="志愿者Logo"
          class="logo-image"
        >
        <span class="logo-text">青年志愿者协会管理系统</span>
      </div>
      
      <div class="user-area">
        <el-dropdown>
          <div class="user-info">
            <el-avatar 
              :size="36" 
              :src="user.avatar" 
              class="avatar"
            />
            <span class="username">{{ user.name }}</span>
            <el-icon><arrow-down /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>消息通知</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const router = useRouter()

// 从localStorage获取用户信息
const user = ref({
  name: '',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

// 初始化用户数据
onMounted(() => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  if (userInfo) {
    user.value.name = userInfo.name || '用户信息'
    user.value.avatar = userInfo.avatar || user.value.avatar
  }
})

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清除本地存储的token和用户信息
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    
    // 跳转到登录页
    router.push('/login_management')
  }).catch(() => {
    // 取消操作
  })
}
</script>

<style scoped lang="scss">
$primary-blue: #1a73e8;
$primary-accent: #fbbc05;

.youth-volunteer-header {
  height: 60px;
  background: linear-gradient(135deg, $primary-blue 0%, #4285f4 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  color: white;
  padding: 0 24px;
  position: fixed; /* 固定在顶部 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 20; /* 确保在侧边栏之上 */

  .header-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
  }

  .logo-area {
    display: flex;
    align-items: center;
    gap: 12px;

    .logo-image {
      height: 36px;
      width: auto;
    }

    .logo-text {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
  }

  .user-area {
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 20px;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      .username {
        font-size: 14px;
      }
    }

    .avatar {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 0 0 3px rgba($primary-accent, 0.3);
      }
    }
  }
}
</style>